<template>
    <div class="mainDiv">
        <div class="rowHead" style="display: flex;height: 100%">
            <div id="mainas" style="width: 50%;height:100%;"></div>
            <div id="main" style="width: 50%;height:100%;"></div>
        </div>
        <div class="rowHead" style="display: flex;height: 100%">
            <div id="lastMonth" style="width: 50%;height:100%;"></div>
            <div id="nowMonth" style="width: 50%;height:100%;"></div>
        </div>
    </div>
</template>
<script>
import C from '#/src/common/common.js'
import eCharts from 'echarts'

export default {
    name: 'mains',
    data() {
        return {

        }
    },
    methods: {
        close() {
            C.closeBrowserWindow()
        },
        async getDatas() {
            return await C.ajax('/shop/shopchart/getchartinfo', {}, 'post')
        },
        sevenDays(data) {
            var csdata = []
            var md = 0,
                nd = new Date()
            for (var i = 0; i < data.length; i++) {
                md = new Date(data[i].addtime * 1000)
                csdata.push({
                    'x': (md.getMonth() + 1) + '月' + md.getDate(),
                    'y': data[i].money
                })
            }

            var t = []
            for (var k = 6; k >= 0; k--) {
                var R = nd.getTime() - 1000 * 3600 * 24 * k
                var M = new Date(R).getMonth() + 1
                var D = new Date(R).getDate()
                t.push({
                    'x': M + '月' + D,
                    'y': 0
                })
            }

            for (var s = 0; s < t.length; s++) {
                for (var j = 0, length2 = csdata.length; j < length2; j++) {
                    if (t[s].x == csdata[j].x) {
                        t[s].y += csdata[j].y
                    }
                }
            }

            return t
        },
        tongji(d, m, x) {
            var dt = { value: 0, name: '' }
            for (var i = 0; i < d.length; i++) {
                dt.value += d[i][m]
            }
            dt.value = Number(dt.value).toFixed(2)
            dt.name = x
            return dt
        },
        cartgoryType(data) {
            var cartgory = []
            cartgory.push(this.tongji(data.cardinfo, 'recemoney', '开卡'))
            cartgory.push(this.tongji(data.orderinfo, 'recemoney', '开单'))
            cartgory.push(this.tongji(data.rechargeinfo, 'recemoney', '充值'))
            return cartgory
        },
        cakeData(data, type) {

            var tm = new Date()

            // 本月日期的时间戳，从本月1号开始
            var thisDateYear = tm.getFullYear()
            var thisDateMoon = tm.getMonth() + 1
            var thisDateTime = Math.round(new Date(thisDateYear + '-' + thisDateMoon + '-01') / 1000)
            var lastDateTime = Math.round(new Date(thisDateYear + '-' + (thisDateMoon - 1) + '-01') / 1000)

            // 上月
            var lastMoon = { c: [], o: [], r: [] }
            // 本月
            var thisMoon = { c: [], o: [], r: [] }

            if (data.cinfo.length) this.fenMoon(data.cinfo, 'c', 'recemoney', thisDateTime, lastDateTime, thisMoon, lastMoon)
            if (data.oinfo.length) this.fenMoon(data.oinfo, 'o', 'recemoney', thisDateTime, lastDateTime, thisMoon, lastMoon)
            if (data.rinfo.length) this.fenMoon(data.rinfo, 'r', 'recemoney', thisDateTime, lastDateTime, thisMoon, lastMoon)


            // 本月饼状图
            var mon = { c: 0, o: 0, r: 0 }
            if (type) this.tMon(thisMoon, mon)
            else this.tMon(lastMoon, mon)

            var cakeMoney = [
                { value: mon.c.toFixed(2) || 0, name: '开卡' },
                { value: mon.o.toFixed(2) || 0, name: '开单' },
                { value: mon.r.toFixed(2) || 0, name: '充值' }
            ]

            return cakeMoney
        },
        fenMoon(shuju, cun, money, thisDateTime, lastDateTime, thisMoon, lastMoon) {
            for (var i = 0; i < shuju.length; i++) {
                if (shuju[i].addtime >= thisDateTime) {
                    thisMoon[cun].push(shuju[i][money])
                } else if (shuju[i].addtime >= lastDateTime && shuju[i].addtime < thisDateTime) {
                    lastMoon[cun].push(shuju[i][money])
                }
            }
        },
        tMon(tM, mon) {
            for (var i in tM) {
                switch (i) {
                    case 'c':
                        tM[i].forEach(function(val, index) {
                            mon.c += (0 | val)
                        })
                        break
                    case 'o':
                        tM[i].forEach(function(val, index) {
                            mon.o += (0 | val)
                        })
                        break
                    case 'r':
                        tM[i].forEach(function(val, index) {
                            mon.r += (0 | val)
                        })
                        break
                }
            }
        }
    },
    mounted: async function() {
        let data = await this.getDatas()

        let sevenDataX = [],
            sevenDataY = []

        this.sevenDays(data.cashinfo).forEach(row => {
            sevenDataX.push(row.x)
            sevenDataY.push(row.y)
        })


        let laiYuan = {
            cardinfo: data.cardinfo,
            orderinfo: data.orderinfo,
            rechargeinfo: data.rechargeinfo
        }

        let data2 = {
            cinfo: data.cinfo,
            oinfo: data.oinfo,
            rinfo: data.rinfo
        }


        eCharts.init(document.getElementById('main')).setOption({
            title: {
                text: '近7日现金来源统计图（现金单位：元）',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['开卡', '开单', '充值']
            },
            series: [{
                name: '现金来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: this.cartgoryType(laiYuan),
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        })

        eCharts.init(document.getElementById('nowMonth')).setOption({
            title: {
                text: '本月现金来源统计图（现金单位：元）',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['开卡', '开单', '充值']
            },
            series: [{
                name: '现金来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: this.cakeData(data2, true),
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        })

        eCharts.init(document.getElementById('lastMonth')).setOption({
            title: {
                text: '上月现金来源统计图（现金单位：元）',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['开卡', '开单', '充值']
            },
            series: [{
                name: '现金来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: this.cakeData(data2, false),
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        })








        eCharts.init(document.getElementById('mainas')).setOption({
            title: {
                text: '近7日现金收益趋势图（现金单位：元）',
                left: '50%',
                textAlign: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    lineStyle: {
                        color: '#ddd'
                    }
                },
                backgroundColor: 'rgba(255,255,255,1)',
                padding: [5, 10],
                textStyle: {
                    color: '#7588E4',
                },
                extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.3)'
            },
            xAxis: {
                type: 'category',
                data: sevenDataX,
                boundaryGap: false,
                splitLine: {
                    show: true,
                    interval: 'auto',
                    lineStyle: {
                        color: ['#D4DFF5']
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#609ee9'
                    }
                },
                axisLabel: {
                    margin: 10,
                    textStyle: {
                        fontSize: 14
                    }
                }
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    lineStyle: {
                        color: ['#D4DFF5']
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#609ee9'
                    }
                },
                axisLabel: {
                    margin: 10,
                    textStyle: {
                        fontSize: 14
                    }
                }
            },
            series: [{
                name: '收入',
                type: 'line',
                smooth: true,
                showSymbol: false,
                symbol: 'circle',
                symbolSize: 6,
                data: sevenDataY,
                areaStyle: {
                    normal: {
                        color: new eCharts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(216, 244, 247,1)'
                        }, {
                            offset: 1,
                            color: 'rgba(216, 244, 247,1)'
                        }], false)
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#58c8da'
                    }
                },
                lineStyle: {
                    normal: {
                        width: 3
                    }
                }
            }]
        })
    }
}
</script>
<style>
</style>